<template>
	<view class="container">
		<view class="catalog">
			<view @click="handleWxLoginAccess">
				<text>微信账号</text>
				<input type="text" :disabled="true" v-model="userBank.account" placeholder="请授权微信账号"
					placeholder-class="plaho" />
			</view>
			<view>
				<text>真实姓名</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.userName" placeholder="请输入真实姓名"
					placeholder-class="plaho" />
			</view>
		</view>
		<view class="button" @click="handleBindAlipay(hasAccount)">{{ hasAccount ? '更改账号' : '立即绑定'}}</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				hasFlag: false, //是否加载完成
				userBank: { //提交账户参数
					account: '',
					userName: '',
					type: 1, //0 支付宝,2银行卡，1微信
					openId: '',
				},
				hasAccount: false,
			}
		},
		methods: {
			// 微信授权
			handleWxLoginAccess() {
				if (this.hasAccount) return
				uni.login({
					provider: 'weixin',
					success: (accessRes) => {
						console.log('微信login成功：', accessRes)
						this.getWxUserInfo()
					},
					fail: (err) => {
						uni.showToast({
							title: '您已取消授权',
							icon: 'none'
						})
						uni.hideLoading()
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			// 获取微信信息
			getWxUserInfo() {
				uni.getUserInfo({
					provider: 'weixin',
					success: (loginRes) => {
						console.log('微信getUserInfo成功：loginRes', loginRes.userInfo.openId, loginRes.userInfo
							.nickName)
						this.userBank.account = loginRes.userInfo.nickName
						this.userBank.openId = uni.getStorageSync('userInfo').openid
					},
					fail: (loginErr) => {
						console.log('微信getUserInfo失败：', loginErr)
						this.handleWxLoginAccess() // 授权
					}
				})
			},
			// 提交绑定
			async handleBindAlipay(flag) {
				if (!this.userBank.account) return uni.showToast({
					title: '请输入您的微信账号',
					icon: 'none'
				})
				if (!this.userBank.userName) return uni.showToast({
					title: '请输入您的姓名',
					icon: 'none'
				})
				if (flag == true) {
					this.hasAccount = false
					this.userBank.account = ''
					this.userBank.userName = ''
				} else {
					let res = await this.$fetch(this.$api.bind_user_bank, this.userBank, 'POST', 'JSON')
					if (res.code) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						if (res.msg == '绑定失败:请先进行实名认证') {
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/real-name/real-name'
								})
							}, 800)
						}
						return
					}
					uni.showToast({
						title: '绑定成功~',
						icon: 'none'
					})
					this.hasAccount = true
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				}
			},
			// 获取已绑定的账号
			async query_bind_user_bank() {
				let res = await this.$fetch(this.$api.query_bind_user_bank, {}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				res.data.forEach(item => {
					if (item.type === 1) {
						this.userBank.account = item.account
						this.userBank.userName = item.userName
						this.hasAccount = true
						console.log('获取已绑定的微信账号item', item)
					}
				})
			},
		},
		onLoad() {
			this.query_bind_user_bank() // 获取已绑定的账号
		},
		onShareAppMessage() {
			if (uni.getStorageSync('userType') == 1) {
				return {
					title: "足不出户，免费招工",
					desc: "线上招募零工，工价透明，免费使用",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
					success: res => {}
				}
			} else {
				return {
					title: "在家找日结兼职，工种齐全",
					desc: "免费使用，提前在家找日结兼职",
					path: `/pages/start-n/start-n`,
					imageUrl: 'https://images.linglinggong.net/static/employee-share.jpg',
					success: res => {}
				}
			}
		},
	}
</script>
<style lang="less" scoped>
	.container {
		// border: 1px solid #000000;
		overflow: hidden;
		position: relative;

		.catalog {
			margin-top: 30rpx;
			background-color: #FFFFFF;

			&>view {
				padding: 0 30rpx;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: space-between;

				&>text {
					height: 40rpx;
					margin: 30rpx 0;
				}

				&>input {
					// border: 1px solid #000000;
					background: transparent;
					flex: 1;
					text-align: right;
					font-size: 14px;
					font-weight: bold;
				}

				.plaho {
					font-weight: normal;
					font-size: 14px;
					color: rgba(64, 33, 16, 0.50);
				}

				&>view {
					display: flex;
					align-items: center;

					&>text {
						margin-right: 30rpx;
						color: rgba(64, 33, 16, 0.50);
					}

					&>image {
						width: 16rpx;
						height: 26rpx;
					}
				}

				&::after {
					content: "";
					position: absolute;
					top: 100rpx;
					width: 720rpx;
					height: 2rpx;
					background: #F2F2F2;
				}
			}
		}

		.button {
			position: fixed;
			bottom: 0;
			width: 100vw;
			height: 100rpx;
			background: #FCC928;
			display: flex;
			justify-content: center;
			align-items: center;

			// letter-spacing: 0;
			&:active {
				opacity: 0.7;
			}
		}
	}
</style>